<template>
  <div class="blog_main">
    <!-- 闲言碎语 -->
    <div class="gossip">
      <Icon
        type="md-aperture"
        style="position: absolute; top: 13px; left: 10px; z-index: 1"
        size="25"
      />

      <el-carousel height="50px" direction="vertical" indicator-position="none">
        <el-carousel-item v-for="item in syMomentsData" :key="item.id">
          <router-link :to="{ name: 'TreeHole' }" v-line-clamp="1"
            >{{ item.content }}--{{ item.figure }}</router-link
          >
        </el-carousel-item>
      </el-carousel>

      <div class="go_gossip" @click="router.push({ name: 'TreeHole' })">
        <Icon type="md-return-right" />
      </div>
    </div>

    <div class="blog_main_one">
      <!--  -->
      <div style="width: 49%; position: relative">
        <!-- 关于 -->
        <ZhutiAbout />
        <!-- 数据 -->
        <ZhutiData />
      </div>
      <!-- 友联 -->
      <div class="linksDiv">
        <el-carousel direction="vertical" :motion-blur="true">
          <el-carousel-item
            v-for="item in variable.linksTableData.value.records"
            :key="item.id"
            class="link_itme"
            @click="goUrl(item.realmName)"
          >
            <div v-if="item.state">
              <Avatar shape="square" icon="ios-person" size="large" :src="item.log" />
              <Badge status="success" style="top: -16px"> </Badge>
            </div>
            <div v-else>
              <Avatar shape="square" icon="ios-person" size="large" :src="item.log" />
              <Badge status="warning" style="top: -16px"> </Badge>
            </div>

            <div style="margin-left: 10px; color: #000; letter-spacing: 1px">
              <h3 v-html="item.name"></h3>
              <Ellipsis
                style="color: #e7e7e7; font-size: 15px"
                :text="item.description"
                :height="30"
              />
            </div>
          </el-carousel-item>
        </el-carousel>

        <div id="qwLink" @click="router.push({ name: 'Links' })">
          <div class="link_btn">
            <strong id="link_wz1">我的朋友们</strong>
            <strong id="link_wz2">我的朋友们 ▶</strong>

            <div id="container-stars">
              <div id="stars"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文章 -->
    <div class="wz_main">
      <div id="wz_main_div1">
        <!-- 文章分类导航 -->
        <div class="articleClassification">
          <div style="width: 95%">
            <span class="articleClassification_dvi liBgc" @click="liClick(0, '')">全部</span>
            <span
              class="articleClassification_dvi"
              v-for="(item, index) in ArticleTypes"
              @click="liClick(index + 1, item)"
              :key="index"
              >{{ item }}</span
            >
          </div>
          <router-link :to="{ name: 'Archives', params: {}, query: {} }" class="gd"
            >更多</router-link
          >
        </div>

        <!-- 文章列表 -->
        <ZhutiArticle />
      </div>

      <div class="wz_yc">
        <Affix :offset-top="80">
          <!-- 仓鼠 -->
          <ZhutiUser />

          <WelcomeMessage style="margin-top: 20px" />
        </Affix>
      </div>
    </div>

    <!-- 留言 -->
    <div class="commentHome">
      <div class="commentHomeRight">
        <CommentAll> 留言 </CommentAll>
      </div>
      <div class="wz_yc"></div>
    </div>
  </div>
</template>
<script setup>
  const axios = inject('axios');
  import { eventBus } from '../../../js/eventBus.js';
  import variable from '../../../js/variable';
  import ZhutiAbout from './ZhutiAbout.vue';
  import ZhutiArticle from './ZhutiArticle.vue';
  import ZhutiData from './ZhutiData.vue';
  import ZhutiUser from './ZhutiUser.vue';
  import WelcomeMessage from './WelcomeMessage.vue';

  import CommentAll from '../../../components/frontdesk/comment/CommentAll.vue';

  const router = useRouter();

  onMounted(() => {
    //调用查询所有文章分类
    findArticleType();
    //调用查询所有说说
    findMoments(15);
    findlist(8);
  });

  // 查询友联列表
  function findlist(pageNum) {
    axios
      .post('links/findLinks', { pageNum: pageNum })
      .then((response) => {
        let res = response.data;
        if (res.msg == '成功') {
          variable.linksTableData.value.records = res.data.records;
          variable.linksTableData.value.total = res.data.total;
          variable.linksTableData.value.current = res.data.current;
        }
      })
      .catch();
  }

  //打开新的页面{友联}
  const goUrl = (url) => {
    window.open(url, '_blank');
  };

  //查询所有文章分类
  const ArticleTypes = ref(null);
  function findArticleType() {
    axios
      .get('article/findArticleType')
      .then((response) => {
        let res = response.data;
        if (res.msg == '成功') {
          ArticleTypes.value = res.data;
        }
      })
      .catch();
  }

  //查询所有说说
  const syMomentsData = ref(null);
  const findMoments = (pageNum) => {
    axios
      // .post("moments/findMomentsForIndex")
      .post('lol/findLOL', { pageSize: 100 })
      .then((response) => {
        let res = response.data;
        if (res.msg == '成功') {
          syMomentsData.value = res.data.records;
        }
      })
      .catch();
  };

  //分类点击事件
  function liClick(index, type) {
    //查询文章列表
    eventBus.emit('findArticle', { type: type });

    // 获取页面中所有的 <li> 元素
    const liElements = document.getElementsByClassName('articleClassification_dvi');
    // 转换成数组并使用 forEach
    Array.from(liElements).forEach((li) => {
      li.classList.remove('liBgc');
    });
    // 然后将选定的 <li> 元素添加 "liBgc" 类
    liElements[index].classList.add('liBgc');
  }
</script>
<style scoped>
  /*  */
  .gossip {
    width: 80%;
    max-width: 1500px;
    height: 50px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
  }

  .el-carousel__item {
    color: #000;
    letter-spacing: 1px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }

  .el-carousel__item a {
    cursor: pointer;
    color: #000;
  }

  .el-carousel__item a:hover {
    color: #687bf2;
  }

  .go_gossip {
    position: absolute;
    top: 15px;
    right: 10px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background-color: #353535;
    color: #fff;
  }

  .go_gossip:hover {
    background-color: #687bf2;
    color: #fff;
  }

  /* ----------------------- */

  .blog_main {
    user-select: none;
    min-height: 1000px;
  }

  .blog_main_one {
    user-select: none;
    height: 370px;
    width: 80%;
    max-width: 1500px;
    margin: 10px auto;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }

  .link_itme {
    background-color: rgba(134, 174, 197, 0.3);
    cursor: pointer;
  }

  .linksDiv {
    width: 49%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }

  #qwLink {
    height: 70px;
  }

  /* ******友联按钮********** */
  #link_wz2 {
    display: none;
  }
  #qwLink:hover #link_wz1 {
    display: none;
  }

  #qwLink:hover #link_wz2 {
    display: block;
  }

  .link_btn {
    height: 70px;
    width: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: 300% 300%;
    transition: 0.5s;
    animation: gradient_301 5s ease infinite;
    background-image:
      linear-gradient(#212121, #212121),
      linear-gradient(137.48deg, #ffdb3b 10%, #fe53bb 45%, #8f51ea 67%, #0044ff 87%);
  }

  #container-stars {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 70px;
    overflow: hidden;
    transition: 0.5s;
  }

  .link_btn strong {
    z-index: 2;
    font-family: 'Avalors Personal Use';
    font-size: 12px;
    letter-spacing: 5px;
    color: #ffffff;
    text-shadow: 0 0 4px white;
  }

  .link_btn:hover #container-stars {
    z-index: 1;
    background-color: #212121;
  }

  .link_btn:active {
    background-origin: border-box;
    background-clip: content-box, border-box;
    animation: none;
  }

  #stars {
    position: relative;
    background: transparent;
    width: 200rem;
    height: 200rem;
  }

  #stars::after {
    content: '';
    position: absolute;
    top: -10rem;
    left: -100rem;
    width: 100%;
    height: 100%;
    animation: animStarRotate 90s linear infinite;
  }

  #stars::after {
    background-image: radial-gradient(#ffffff 1px, transparent 1%);
    background-size: 50px 50px;
  }

  #stars::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 170%;
    height: 500%;
    animation: animStar 60s linear infinite;
  }

  #stars::before {
    background-image: radial-gradient(#ffffff 1px, transparent 1%);
    background-size: 50px 50px;
    opacity: 0.5;
  }

  @keyframes gradient_301 {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  @keyframes animStar {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-135rem);
    }
  }

  @keyframes animStarRotate {
    from {
      transform: rotate(360deg);
    }

    to {
      transform: rotate(0);
    }
  }

  @keyframes pulse_3011 {
    0% {
      transform: scale(0.75);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
      transform: scale(0.75);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }
  /* **************** */

  .liBgc {
    background-color: #425aef;
    color: #fff !important;
  }

  .wz_main {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    user-select: none;
  }
  .commentHome {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    user-select: none;
  }
  .commentHomeRight {
    width: calc(100% - 320px);
    overflow: hidden;
    border-radius: 10px;
  }
  #wz_main_div1 {
    width: calc(100% - 320px);
  }

  .wz_yc {
    width: 300px;
    display: flex;
    flex-direction: column;
  }

  .articleClassification {
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    display: flex;
  }

  .gd {
    margin: 0 0 0 10px;
    color: #000;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 20px;
    width: 50px;
  }

  .gd:hover {
    color: #2853df;
  }

  .articleClassification_dvi {
    padding: 5px 15px;
    margin: 0 0 0 10px;
    color: #000;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
  }

  .articleClassification_dvi:hover {
    background-color: #2853df;
    color: #fff;
  }

  @media (max-width: 1200px) {
    .wz_main,
    .commentHome {
      width: 100%;
      justify-content: center;
    }

    .commentHomeRight {
      width: 90%;
    }
    #wz_main_div1 {
      width: 100%;
    }

    .wz_yc {
      display: none !important;
    }
    .blog_main_one {
      display: none !important;
    }

    .articleClassification {
      display: none !important;
    }

    .gossip {
      width: 90%;
      border-radius: 10px;
      overflow: hidden;
    }
  }
</style>
